<template>
  <div class="container clear-float">
    <div class="content-container">
      <div class="content">
        <div class="title-container">
          <span class="title">{{title ? title : "当前页"}}</span>
        </div>
        <slot name="content" class="content-slot"></slot>
        <slot></slot>
      </div>
    </div>
    <div class="menu">
      <MenuList :menuList="menuList"></MenuList>
    </div>
  </div>
</template>

<script>
import MenuList from "./MenuList";

export default {
  name: "AppView",
  components: {
    MenuList
  },
  props: {
    menuList: Object
  },
  data: function () {
    return {
      title: ""
    }
  },
  methods: {
    updateTitle() {
      if(this.$route.meta) {
        this.title = this.$route.meta.title
      }else{
        this.title = "";
      }
    }
  },
  created() {
    this.updateTitle();
  },
  updated() {
    this.updateTitle();
  }
}
</script>

<style scoped>
  .container {
    height: 100%;
  }
  
  .menu {
    float: left;
    margin-left: -100%;
    width: 220px;
    height: 100%;
    background-color: lightgray;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .menu::-webkit-scrollbar {
    display: none;
  }
  
  .content-container {
    float: left;
    width: 100%;
    height: 100%;
    background-color: #fff;
  }
  
  .content {
    height: 100%;
    overflow: auto;
    margin-left: 220px;
    background-color: #fff;
  }
  
  .title-container {
    background-color: #e5e5e5;
    padding-top: 5px;
    padding-bottom: 0;
    vertical-align: bottom;
  }
  
  .title {
    display: inline-block;
    margin-left: 50px;
    padding: 10px 25px 0 25px;
    background-color: #fff;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    font-weight: 300;
    font-size: 16px;
  }
</style>